Open a loading popup from MAUI viewmodel

In this new post, I show how to open a loading popup from ViewModel in MAUI. It is quite an easy implementation but it is working quite well.

Add CommunityToolkit.Maui

Create a new .NET MAUI project. Once that’s done, install the NuGet package CommunityToolkit.Maui into your project, as shown in the screenshot below:

Add the necessary initialization code in order to use the toolkit. Now we can move onto creating the actual popup.

Create the popup

The .NET MAUI Community Toolkit provides the Popup view, which you can use to create a custom UI that you can present to your users. We’ll use this and populate it with an ActivityIndicator, which will be our spinner.

Right-click your project and select Add New Item -> .NET MAUI -> .NET MAUI ContentPage (XAML). Name it LoadingPopup.xaml:

Replace the XAML content with this:

<toolkit:Popup
    x:Class="MyProject.LoadingPopup"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit">
    <VerticalStackLayout>
        <ActivityIndicator IsRunning="True" />
        <Label Text="Loading..." />
    </VerticalStackLayout>
</toolkit:Popup>

And update the code-behind (LoadingPopup.xaml.cs) to now inherit from Popup instead of ContentPage:

public partial class LoadingPopup : Popup
{
    ...
}

Open the popup

Since the project template already has a button in the MainPage file, we can update the Clicked event handler to open our popup. Go to the code-behind file of MainPage.xaml.cs and replace the content of the OnCounterClicked method:

var popup = new LoadingPopup();
this.ShowPopup(popup);

That’s it! That’s all you need to create your own spinner popup. If you want to programatically close the popup, you can call the Close()-method on the popup. Also, by default your popups can be dismissed by clicking outside of it. If you want to prevent this, you can set the CanBeDismissedByTappingOutsideOfPopup property of the Popup to false in your XAML.

Popup Service

Now, from the ViewModels, I can’t call the function ShowPopup or close an open popup. For this reason, I must create a service that helps me display or hide a popup from the ViewModel.

IPopupService

For this reason, the first step is to create an IPopupService interface

namespace MyProject.Interfaces
{
    public interface IPopupService
    {
        void Init(Page page);
        void ClosePopup(Popup popup);
        void ShowPopup(Popup popup);
    }
}

This is a very simple interface but it has everything I need to display and hide a popup.

PopupService

Now, the next step is to implement this service in the project. The code is following

public class PopupService : IPopupService
{
    Page page { get; set; }

    public void ClosePopup(Popup popup)
    {
        if (page == null)
            page = Application.Current?.MainPage ?? throw new NullReferenceException();
        popup.Close();
    }

    public void Init(Page page)
    {
        this.page = page;
    }

    public void ShowPopup(Popup popup)
    {
        if (page == null)
            page = Application.Current?.MainPage ?? throw new NullReferenceException();
        page.ShowPopup(popup);
    }
}

Register the service

After that, I have to register this service in the _MauiProgram.cs_. So, place this line in it:

builder.Services.AddTransient<Interfaces.IPopupService, Services.PopupService>();

As you can see, I added Interfaces because it could be confusion between IPopupService from the CommunityToolkit.Maui and my implementation.

Use the service

Now, on your page or in your view model, it is enough to inject this service in the constructor. For example:

Interfaces.IPopupService popupService;
Page page;

public MyViewModel(IPopupService popupService)
{
    this.popupService = popupService;
}

Open the popup

After that, in the view model, I can invoke the LoadingPage to popup like

var loading = new LoadingPopup();
popupService.ShowPopup(loading);

Close the popup

Now, to close the popup is enough to invoke the Close method like

popupService.ClosePopup(loading);

Wrap up

In this post, I show you how to open a loading popup from MAUI ViewModel using CommunityToolkit.Maui and an implemented custom service.